<template>
	<div class="contents">
		<el-tabs v-model="activeName">
			<el-tab-pane label="基础商品" name="first">
				<el-form ref="ruleForm" :inline="true" label-position="right" label-width="80px" :model="dataFilter">
					<el-form-item prop="category_id" label="商品筛选:">
						<!-- <el-cascader
					  v-model="dataFilter.category_id"
					  clearable
					  :options="options"
					  placeholder="全部分类"
					  @change="handleChange"
					/> -->
						<goods-type @selectType="changeType" ref="clear" :checked="true"></goods-type>
					</el-form-item>
					<el-form-item prop="name" label="搜索:">
						<el-input v-model="dataFilter.name" placeholder="商品名称 / 编码 / 助记码" style="width: 215px;"
							clearable />
					</el-form-item>
					<el-form-item prop="state" label="商品状态:" >
						<el-select v-model="dataFilter.state" placeholder="选择商品状态" clearable>
							<el-option v-for="item in opt1" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :style="{ visibility: !openCol ? 'hidden' : 'visible' }">
						<el-button type="primary" @click="handleSearch">查询</el-button>
						<!-- <el-button>导出</el-button> -->
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
					<!-- <el-form-item>
						<el-button style="margin-left: 85px;" type="text" @click="clickOpen">
							<span :style="{ visibility: openCol ? 'hidden' : 'visible' }">
								收起
							</span>
							高级筛选
							<vab-icon :icon="openCol ? 'arrow-down-s-line' : 'arrow-up-s-line'" />
						</el-button>
					</el-form-item> -->
					<!-- <br />
					<div v-show="!openCol">
						<el-form-item prop="purchase_type" label="采购:">
							<el-select v-model="dataFilter.purchase_type" placeholder="选择采购类型" clearable>
								<el-option v-for="item in optType" :key="item.value" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="state" label="商品状态:" clearable>
							<el-select v-model="dataFilter.state" placeholder="选择上下架" clearable>
								<el-option v-for="item in opt1" :key="item.value" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="stock" label="售卖库存:">
							<el-select v-model="dataFilter.stock" placeholder="售卖库存" clearable>
								<el-option v-for="item in opt2" :key="item.value" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item style="margin-left: 80px;">
							<el-button type="primary" @click="handleSearch">查询</el-button>
							<el-button @click="resetForm('ruleForm')">重置</el-button>
							<el-button>导出</el-button>
						</el-form-item>
					</div> -->
				</el-form>
				<div style="padding-bottom: 16px;">
					<el-button @click="gocreate" type="primary" v-if="lmit">新增</el-button>
					<el-button @click="batchPass" type="primary" v-if="userLmit">批量审核通过</el-button>
					<!-- <el-tooltip class="item" content="将商品库存量同步至售卖库存(仅同步自定义售卖库存的商品)" effect="dark" placement="top">
						<el-button>同步售卖库存</el-button>
					</el-tooltip> -->
					<!-- <el-button plain @click="batchdata = true">批量导入</el-button> -->
					<!-- <el-button plain @click="totals = true">从总平台导入商品</el-button>
					<el-button plain @click="cloudata = true">从云商品库导入</el-button> -->
				</div>
				<!-- 批量导入 -->
				<el-dialog :close-on-click-modal="false" custom-class="modals" limit="15" :visible.sync="batchdata"
					width="520px">
					<span slot="title">
						<h3>批量导入商品基础资料</h3>
					</span>
					<div>
						<el-form label-position="right" label-width="110px">
							<el-form-item label="下载模板：">
								点击下载
								<span style="color: #1890ff;cursor: pointer;" @click="down">商品导入模板</span>
							</el-form-item>
							<el-form-item label="选择上传文件：">
								<el-upload class="upload-demo" :action="actionUrl"
									accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
									:on-success="handleUpload" :on-error="handleError" :file-list="fileList">
									<el-button size="small" type="primary">点击上传</el-button>
									<div slot="tip" class="el-upload__tip">只能上传.xls/.xlsx文件</div>
								</el-upload>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
						<el-button @click="batchdata = false">取消</el-button>
						<el-button type="primary" @click="batchdata = false">
							确定
						</el-button>
					</span>
				</el-dialog>
				<!-- 总平台弹窗 -->
				<el-dialog :close-on-click-modal="false" custom-class="modals" limit="15" :visible.sync="totals"
					width="1100px">
					<span slot="title">
						<h3>请选择商品</h3>
					</span>
					<div class="items">
						<el-cascader v-model="value" clearable :options="options" placeholder="全部分类"
							@change="handleChange" />
						<el-select v-model="value" placeholder="未添加" style="padding-left: 10px;">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
						<el-input class="input-with-select" placeholder="请输入商品名称/编码进行搜索"
							style="padding-left: 10px; width: 260px;">
							<el-button slot="append" icon="el-icon-search" />
						</el-input>
					</div>
					<el-table ref="multipleTable" :data="tableTotal" style="width: 100%; margin-top: 10px;"
						tooltip-effect="dark" v-loading="listLoading">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column label="商品图片" width="120">
							<template slot-scope="scope">
								<el-image :src="scope.row.imgsrc" style="width: 50px; height: 50px;" />
							</template>
						</el-table-column>
						<el-table-column label="商品编码" prop="name" />
						<el-table-column label="商品名称" prop="address" />
						<el-table-column label="商品分类" prop="name" />
						<el-table-column label="单位" prop="name" />
						<el-table-column label="描述" prop="name" />
					</el-table>
					<el-pagination background :current-page="currentPage4"
						layout="total, prev, pager, next, sizes, jumper" :page-size="100" :page-sizes="[10, 20, 30, 40]"
						style="text-align: right;" :total="5" />
					<span slot="footer" class="dialog-footer">
						<el-button @click="totals = false">取消</el-button>
						<el-button type="primary" @click="totals = false">
							导入当前选中
						</el-button>
						<el-button type="primary" @click="totals = false">
							导入全部页面
						</el-button>
					</span>
				</el-dialog>
				<!-- 云平台弹窗 -->
				<el-dialog :close-on-click-modal="false" custom-class="modals" limit="15" :visible.sync="cloudata"
					width="1100px">
					<span slot="title">
						<h3>从云商品库导入</h3>
					</span>
					<div class="items">
						<el-cascader v-model="value" clearable :options="options" placeholder="请选择分类"
							@change="handleChange" />
						<el-input class="input-with-select" placeholder="请输入商品名称/编码进行搜索"
							style="padding: 0 10px; width: 260px;">
							<el-button slot="append" icon="el-icon-search" />
						</el-input>
						<el-checkbox>隐藏已导入商品</el-checkbox>
						<el-checkbox>使用系统分类</el-checkbox>
					</div>
					<el-table ref="multipleTable" :data="tableCloud" style="width: 100%; margin-top: 10px;"
						tooltip-effect="dark">
						<el-table-column align="center" type="selection" width="55" />
						<el-table-column label="商品图片" width="120">
							<template slot-scope="scope">
								<el-image :src="scope.row.imgsrc" style="width: 50px; height: 50px;" />
							</template>
						</el-table-column>
						<el-table-column label="云商品名称" prop="address" />
						<el-table-column label="单位" prop="name" />
						<el-table-column label="商品分类" prop="name" />
						<el-table-column label="采购类型" prop="name">
							<template slot-scope>
								<el-cascader v-model="value" clearable :options="options" placeholder="请选择采购类型F"
									@change="handleChange" />
							</template>
						</el-table-column>
						<el-table-column label="状态" prop="name">
							<template slot-scope="scope">
								<span style="color: red;">{{ scope.row.name }}</span>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination background :current-page="currentPage4"
						layout="total, prev, pager, next, sizes, jumper" :page-size="100" :page-sizes="[10, 20, 30, 40]"
						style="text-align: right;" :total="5" />
					<span slot="footer" class="dialog-footer">
						<el-button @click="cloudata = false">取消</el-button>
						<el-button type="primary" @click="cloudata = false">
							一键导入
						</el-button>
					</span>
				</el-dialog>
				<el-table :data="tableData.list" style="width: 100%;" @select="selectGoods" @select-all="selectGoods">
					<el-table-column type="expand">
						<template slot-scope="props">
							<div v-for="(item,index) in props.row.goodsPriceList" :key="index">
								<el-form inline class="demo-table-expand" v-if="index != 0">
									<el-form-item label="辅助单位:">
										<span>{{item.relation}}{{props.row.goodsPriceList[0].unit}}/{{ item.unit }}</span>
									</el-form-item>
									<el-form-item label="描述:">
										<span>{{ item.detail }}</span>
									</el-form-item>
									<el-form-item label="市场价:">
										<span>{{ item.price | filterMoney }}</span>
									</el-form-item>
									<el-form-item label="是否可售卖:">
										<span>{{ item.is_on_sale == 1?'可售卖':'无法售卖' }}</span>
									</el-form-item>
								</el-form>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" type="selection" width="55" :selectable="checkSelectable" />
					<el-table-column label="商品图片" prop="goodsImages.path">
						<template slot-scope="scope">
							<el-image :src="scope.row.goodsMainImagelist[0].path" style="width: 50px; height: 50px;" />
						</template>
					</el-table-column>
					<el-table-column label="商品名称" prop="name">
						<template slot-scope="scope">
							<el-tooltip class="item" :content="scope.row.name" effect="dark" placement="bottom">
								<el-button size="mini" type="text" @click="handleLook(scope.row)">
									{{ scope.row.name }}
								</el-button>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="分类" prop="category.name" />
					<el-table-column label="基础单位" prop="goodsPrice.unit" />
					<el-table-column label="市场价(元)">
						<template slot-scope="scope">
							<!-- {{ scope.row.goodsPrice.price.toFixed(2)/100 }} -->
							{{ scope.row.goodsPrice.price | filterMoney }}
						</template>
					</el-table-column>
					<!-- <el-table-column label="市场价" prop="goodsPrice.price" /> -->
					<el-table-column label="状态" prop="state" width="180">
						<template slot-scope="scope">
							<div v-if="scope.row.reason" style="display: flex;align-items: center;">
								<p slot="reference">
									{{scope.row.state == 0?'未上架':scope.row.state == 1?'已上架':scope.row.state == 2?'待审核':'审核不通过'}}
								</p>
								<tooltip-msg :messages="scope.row.reason" place="right" />
							</div>
							<div v-else>
								<p slot="reference">
									{{scope.row.state == 0?'未上架':scope.row.state == 1?'已上架':scope.row.state == 2?'待审核':'审核不通过'}}
								</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="别名" prop="alias" />
					<el-table-column label="操作" prop="desc" width="280">
						<template slot-scope="scope">
							<el-button size="mini" type="text" @click="handleEdit(scope.row)"
								v-if="matchState(scope.row.state)">
								编辑
							</el-button>
							<el-button size="mini" type="text" @click="handleLook(scope.row)"
								v-if="matchView(scope.row.state)">
								查看
							</el-button>
							<el-button slot="reference" size="mini" type="text" @click="assignment(scope.row,2)"
								v-if="matchShelves(scope.row.state)">
								上架
							</el-button>
							<el-button slot="reference" size="mini" type="text" @click="assignment(scope.row,0)"
								v-if="matchTheShelves(scope.row.state)">
								下架
							</el-button>
							<el-button slot="reference" size="mini" type="text" @click="assignment(scope.row,1)"
								v-if="matchPass(scope.row.state)">
								通过审核
							</el-button>
							<el-button slot="reference" size="mini" type="text" @click="assignment(scope.row,3)"
								v-if="matchPassTwo(scope.row.state)">
								不通过审核
							</el-button>
							<el-button slot="reference" size="mini" type="text" @click="delList(scope.row)"
								v-if="matchDel(scope.row.state)">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-dialog title="审核不通过原因" :visible.sync="dialog" :close-on-click-modal="false">
					<el-form :model="form">
						<el-form-item label="不通过原因" :label-width="formLabelWidth">
							<el-input type="textarea" v-model="form.reason" placeholder="请输入不通过原因"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialog = false">取 消</el-button>
						<el-button type="primary" @click="mackRefused">确 定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
					<span v-if="ginseng == 2">是否确认上架此商品</span>
					<span v-if="ginseng == 0">是否确认下架此商品</span>
					<span v-if="ginseng == 1">是否确认此商品通过审核</span>
					<span v-if="ginseng == 3">是否确认此商品不通过审核</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="shelves">确 定</el-button>
					</span>
				</el-dialog>
				<el-dialog title="提示" :visible.sync="dialogVisibleThree" width="30%" :close-on-click-modal="false">
					<span>是否确认批量审核</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisibleThree = false">取 消</el-button>
						<el-button type="primary" @click="audit">确 定</el-button>
					</span>
				</el-dialog>
				<el-dialog title="提示" :visible.sync="dialogVisibleTwo" width="30%" :close-on-click-modal="false">
					<span>是否确认删除此商品</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisibleTwo = false">取 消</el-button>
						<el-button type="primary" @click="handleDelete">确 定</el-button>
					</span>
				</el-dialog>
				<el-pagination background @current-change="currentChange" :current-page="currentPage4"
					@size-change="sizeChange" layout="total, prev, pager, next,sizes" :page-size="tableData.pageSize"
					:page-sizes="[10, 20, 30, 40, 50]" style="text-align: right;" :total="tableData.total" />
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import { getGoodsQuery, getGoodsDel, getGoodsEdit, exportTep, getEdit } from '@/api/goodslist'
	import TooltipMsg from '@/components/TooltipMsg.vue'
	import { baseURL } from '@/config/net.config.js'
	import goodsType from '@/components/goodsType.vue'
	export default {
		inject: ['reload'],
		components: {
			goodsType,
			TooltipMsg
		},
		filters: {
			filterMoney(num) {
				return (num / 100).toFixed(2)
			}
		},
		data() {
			return {
				actionUrl: baseURL + '/goods/info/import/excel',
				activeName: 'first',
				fileList: [],
				parameter: {},
				parameterTwo: {},
				ginseng: '',
				dialog: false,
				dialogVisible: false,
				dialogVisibleTwo: false,
				dialogVisibleThree: false,
				formLabelWidth: '120px',
				returnReason: {},
				form: {
					reason: ''
				},
				userLmit: false,
				lmit: false,
				roles: '',
				batch: [],
				batchParams: {
					auditingList: []
				},
				openCol: true,
				batchdata: false, //批量导入
				totals: false, //总平台
				cloudata: false, //云平台
				currentPage4: 1,
				tableData1: [{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄',
					},
					{
						date: '2016-05-04',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1517 弄',
					},
					{
						date: '2016-05-01',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1519 弄',
					},
					{
						date: '2016-05-03',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄',
					},
				],
				tableData: [],
				tableCloud: [],
				tableTotal: [],
				listLoading: true,
				dataFilter: {
					category_id: '',
					name: '',
					purchase_type: '',
					state: '',
					stock: '',
					pagesize: 10,
					current: 1
				},
				value: [],
				options: [{
						value: 'quanbu',
						label: '全部分类',
					},
					{
						value: 'zhinan',
						label: '指南',
						children: [{
								value: 'shejiyuanze',
								label: '设计原则',
							},
							{
								value: 'daohang',
								label: '导航',
							},
						],
					},
					{
						value: 'zujian',
						label: '组件',
						children: [{
								value: 'basic',
								label: 'Basic',
							},
							{
								value: 'form',
								label: 'Form',
							},
						],
					},
					{
						value: 'ziyuan',
						label: '资源',
						children: [{
							value: 'axure',
							label: 'Axure Components',
						}, ],
					},
				],
				opt1: [{
						value: 1,
						label: '已上架',
					},
					{
						value: 0,
						label: '已下架',
					},
					{
						value: 2,
						label: '待审核',
					},
					{
						value: 3,
						label: '审核不通过',
					}
				],
				optType: [{
						value: '供应商送货',
						label: '供应商送货',
					},
					{
						value: '市场自采',
						label: '市场自采',
					},
				],
				opt2: [{
						value: 0,
						label: '不限制售卖库存商品',
					},
					{
						value: 1,
						label: '限制售卖库存商品',
					}
				],
			}
		},
		created() {
			this.getList()
			this.userLmit = this.$store.state.user.roles == "supplier" ? false : true
			this.lmit = this.$store.state.user.roles == "business" ? false : true
			this.roles = this.$store.state.user.roles
		},
		methods: {
			renderHeader(h, { column }) {
				return h(
					'div', [
						h('span', column.label),
						h('el-tooltip', {
								props: {
									effect: 'dark',
									content: '状态为不审核通过时鼠标聚焦能展示原因',
									placement: 'top',
								},
							},
							[h('i', {
								class: 'el-icon-question',
								style: 'color:#00000;margin-left:5px;cursor:pointer;'
							})], { content: '状态为不审核通过时鼠标聚焦能展示原因' })
					]
				);
			},
			//编辑按钮
			matchState(e) {
				if (this.roles == 'Admin') {
					if (e == 0 || e == 3) {
						return true
					}
				}
				if (this.roles == 'supplier') {
					if (e == 0 || e == 3) {
						return true
					}
				}
			},
			//查看按钮
			matchView(e) {
				if (this.roles == 'Admin') {
					if (e == 1) {
						return true
					}
				}
				if (this.roles == 'supplier') {
					if (e == 1 || e == 2) {
						return true
					}
				}
				if (this.roles == 'business') {
					if (e != 2) {
						return true
					}
				}
			},
			//上架按钮
			matchShelves(e) {
				if (this.roles == 'Admin') {
					if (e == 0 || e == 3) {
						return true
					}
				}
				if (this.roles == 'supplier') {
					if (e == 0 || e == 3) {
						return true
					}
				}
			},
			//下架
			matchTheShelves(e) {
				if (this.roles == 'Admin') {
					if (e == 1) {
						return true
					}
				}
				if (this.roles == 'supplier') {
					if (e == 1) {
						return true
					}
				}
				if (this.roles == 'business') {
					if (e == 1) {
						JSON.stringify()
						return true
					}
				}
			},
			//审核
			matchPass(e) {
				if (this.roles == 'Admin') {
					if (e == 2) {
						return true
					}
				}
				if (this.roles == 'business') {
					if (e == 2) {
						return true
					}
				}
			},
			matchPassTwo(e) {
				if (this.roles == 'Admin') {
					if (e == 2) {
						return true
					}
				}
				if (this.roles == 'business') {
					if (e == 2) {
						return true
					}
				}
			},
			//删除
			matchDel(e) {
				if (this.roles == 'Admin') {
					if (e == 0 || e == 3) {
						return true
					}
				}
				if (this.roles == 'supplier') {
					if (e == 0 || e == 3) {
						return true
					}
				}
			},
			checkSelectable(row) {
				if (row.state == 2) {
					return true
				} else {
					return false
				}
			},
			selectGoods(sel, row) {
				this.batch = JSON.parse(JSON.stringify(sel))
				this.batch.forEach((e, index) => {
					e.state = 1
				})
				this.batchParams.auditingList = this.batch
			},
			async batchPass() {
				if (this.batchParams.auditingList.length == 0) {
					this.$message.warning('请选择需要审核的数据')
					return false
				}
				this.dialogVisibleThree = true
			},
			async audit() {
				let res = await getEdit(this.batchParams)
				if (res.status == 200) {
					this.dialogVisibleThree = false
					this.$message.success('审核成功')
					this.getList()
				}
			},
			handleUpload() {
				this.$notify({
					message: '导入成功',
					type: 'success',
				})
				this.batchdata = false
			},
			handleError() {
				this.$notify({
					message: '导入失败',
					type: 'error',
				})
				this.batchdata = false
			},
			down() {
				window.location.href = baseURL + '/goods/info/export/modelexcel'
			},
			async getList() {
				this.listLoading = true
				const res = await getGoodsQuery(this.dataFilter)
				if (res && res.status == 200) {
					this.tableData = res.data
					this.listLoading = false
				}
			},
			changeType(data) {
				this.dataFilter.category_id = data[data.length - 1]
				// console.log(data, '1111111111')
			},
			//查询
			handleSearch() {
				this.getList()
			},
			//重置
			resetForm(formName) {
				this.$refs[formName].resetFields()
				this.$refs.clear.details = ''
				this.getList()
			},
			handleChange(value) {
				// console.log(value)
			},
			clickOpen() {
				this.openCol = !this.openCol
			},
			gocreate() {
				this.$router.push('/goods/goodscreate')
			},
			//编辑
			handleEdit(item) {
				this.$router.push({ path: '/goods/goodsEdit', query: { id:item.id, flag: 'edit' } })
			},
			//查看
			handleLook(item) {
				this.$router.push({ path: '/goods/goodsLook', query: { id:item.id, flag: 'edit' } })
			},
			async mackRefused() {
				if (this.form.reason == '') {
					this.$message.warning('请填写审核不通过原因')
					return false
				}
				const res = await getEdit({
					id: this.returnReason.id,
					state: 3,
					reason: this.form.reason
				})
				if (res.status == 200) {
					this.dialogVisible = false
					this.dialog = false
					this.form.reason = ''
					this.$message.success('操作成功')
					// this.reload();
					this.getList()
				}
			},
			//按钮操作
			async shelves() {
				let e = this.parameter
				let a = this.ginseng
				if (a == 3) {
					this.dialog = true
					this.returnReason = e
					return false
				}
				const res = await getEdit({
					id: e.id,
					state: a
				})
				if (res.status == 200) {
					this.$message.success('操作成功')
					this.dialogVisible = false
					// this.reload();
					this.getList()
				}
			},
			assignment(e, a) {
				this.dialogVisible = true
				this.parameter = JSON.parse(JSON.stringify(e))
				this.ginseng = a
			},
			delList(e) {
				this.parameterTwo = JSON.parse(JSON.stringify(e))
				this.dialogVisibleTwo = true
			},
			//删除
			async handleDelete() {
				let item = this.parameterTwo
				const res = await getGoodsDel({
					id: item.id,
				})
				if (res.status == 200) {
					this.$message.success('删除成功')
					this.dialogVisibleTwo = false
					this.getList()
				} else {
					this.$message(res.message)
				}
			},
			currentChange(e) {
				this.dataFilter.current = e
				this.getList()
			},
			sizeChange(e) {
				this.dataFilter.pagesize = e
				this.getList()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.contents {
		padding: 0 20px 10px;

		.items {
			display: flex;
			align-items: center;
		}
	}

	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 25%;
	}

	.el-button {
		margin-left: 0px !important;
		margin-right: 10px;
	}
</style>
